import React, { useState, useEffect } from 'react';
import { WordCloud } from '@ant-design/charts';
import { Card, Table } from 'antd';
import cluster from './cluster2.json';
import plotComplexNetworck from '../../lib/plotComplexNetwork';
import './tooltip.css';
// eslint-disable-next-line
export default props => {
  const [data, setData] = useState([]);
  const [graph, setGraph] = useState([]);
  const [tabelData, setTableData] = useState([]);
  useEffect(() => {
    getTabelData();
    setTimeout(() => {
      setData(cluster.filter(item => item.name.substr(0, 4) !== '哔哩哔哩'));
    }, 100);
    const nodes = cluster.map((item, index) => {
      return {
        ...item,
        id: '' + index,
      };
    });
    // let edges = [];
    // let names = cluster.map(item => item.name);
    // for (let i = 0; i < nodes.length; i++) {
    //   nodes[i].follow.forEach(name => {
    //     if (name.substr(0, 4) !== '哔哩哔哩') {
    //       const source = '' + nodes[i].id;
    //       const target = '' + names.indexOf(name);
    //       const targets = edges.filter(item => target === item.source).map(item => item.target);
    //       if (!targets.includes(source)) {
    //         edges.push({ source, target });
    //       }
    //     }
    //   });
    // }
    let edges = [];
    let tempEdges = [];
    let names = cluster.map(item => item.name);
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].follow.forEach(name => {
        if (name.substr(0, 4) !== '哔哩哔哩') {
          const source = '' + nodes[i].id;
          const target = '' + names.indexOf(name);
          const targets = tempEdges.filter(item => target === item.source).map(item => item.target);
          tempEdges.push({ source, target });
          if (targets.includes(source)) {
            edges.push({ source, target });
          }
        }
      });
    }
    setGraph({
      nodes,
      edges,
    });
  }, []);
  useEffect(() => {
    graph.length !== 0 && plotComplexNetworck(graph, 'container');
  }, [graph]);
  var config = {
    data: data,
    wordField: 'name',
    weightField: 'fansNum',
    colorField: 'cluster',
    wordStyle: {
      fontFamily: 'Verdana',
      fontSize: [16, 48],
      rotation: 0,
    },
    random: function random() {
      return 0.5;
    },
  };
  const getTabelData = () => {
    const communites = [];
    for (let i = 1; i < 7; i++) {
      communites.push(cluster.filter(item => item.cluster === i));
    }
    const data = [];
    while (true) {
      const temp = [];
      for (let i = 0; i < communites.length; i++) {
        temp.push(communites[i].length === 0 ? '-' : communites[i].pop().name);
      }
      if (temp.every(item => item === '-')) break;
      temp.push(temp[0]);
      const a = { ...temp };
      delete a['0'];
      data.push(a);
    }
    setTableData(data);
  };
  const columns = [...new Set(cluster.map(item => item.cluster))].map(item => {
    return {
      title: '分区 ' + item,
      dataIndex: item,
      key: item,
    };
  });
  return (
    <>
      <Card title="B站UP">
        <Card title="词云" type="inner">
          <WordCloud {...config} />
        </Card>
        <Card title="分区拓扑" type="inner">
          <div id="container" style={{ width: '500px', height: '500px', margin: '0 auto' }} />
        </Card>
        <Card title="分区列表" type="inner">
          <Table dataSource={tabelData} columns={columns} pagination={false} size="small" />
        </Card>
      </Card>
    </>
  );
};
